<template>
	<view class="container">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="box" style="display: flex;">
				<span style="margin-right: 20rpx;">物料码</span>
				<u--input 
						placeholder="请输入/扫描" 
						v-model="query.materialCode" 
						suffixIcon="scan" 
						@confirm="toQuery"
						suffixIconStyle="font-size: 68rpx"
						style="flex: 1;">
				</u--input>
			</u-form-item>
		</u--form>
		<uni-card title="物料信息">
			<view style="display: flex;font-size: 32rpx;">
				<view style="flex: 1;">物料编码:</view>
				<view style="flex: 3;">{{ table.materialCode }}</view>
			</view>
			<view style="display: flex;font-size: 32rpx;">
				<view style="flex: 1;">物料名称:</view>
				<view style="flex: 3;">{{ table.materialName }}</view>
			</view>
			<view style="display: flex;font-size: 32rpx;">
				<view style="flex: 1;">载具类型:</view>
				<view style="flex: 3;">{{ table.material ? getType(table.materialType) : '' }}</view>
			</view>
			<view style="display: flex;font-size: 32rpx;">
				<view style="flex: 1;">最大容量:</view>
				<view style="flex: 3;">{{ table.maxQty }}</view>
			</view>
			<view style="display: flex;font-size: 32rpx;">
				<view style="flex: 1;">单位:</view>
				<view style="flex: 3;">{{ table.unit }}</view>
			</view>
			<view style="display: flex;font-size: 32rpx;">
				<view style="flex: 1;">库区:</view>
				<view style="flex: 3;">{{ table.warehouseArea }}</view>
			</view>
			<view style="display: flex;font-size: 32rpx;">
				<view style="flex: 1;">有效期:</view>
				<view style="flex: 3;">{{ table.overdueDay }}</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import { toQueryAPI } from '@/api/work/material.js'
	import uniCard from '@/node_modules/@dcloudio/uni-ui/lib/uni-card/uni-card.vue'; 
	export default {
		components: {
			uniCard
		},
		data() {
			return {
				query: {
					materialCode: ''
				},
				table: []
			};
		},
		onLoad(options) {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},
		onUnload() {  
		  // 移除监听事件      
		  uni.$off('scancodedate')
		},
		methods: {
			getCode(code) {
				if (code.length === 18) {
					this.query.materialCode = code
					this.toQuery()
				}
			},
			async toQuery() {
				const res = await toQueryAPI(this.query.materialCode)
				this.table = res
			},
			getType(val) {
				switch(val) {
					case '1':
						return '料箱'
					case '2':
						return '托盘'
					case '3':
						return '工装'
					default:
						return '无'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/deep/ .uni-card {
	margin: 0 !important;
	padding: 10rpx !important;
}
</style>
